<template>
    <div style="margin-left: 100px;margin-right: 100px;">
        <el-row class="goods-row" :gutter="20" v-for="(row, index) in rows" :key="index">
            <el-col class="goods-col" :span="6" v-for="(col, colIndex) in row" :key="colIndex" @click="detail(col)">
                <div class="goods-box">
                    <el-image style="width: 279px;height: 279px;border: 1px lightgray solid;" :src="col.cover" fit="cover">
                        <template #error>
                            <div class="image-slot" style="font-size: 30px;">
                                <el-icon>
                                    <Picture />
                                </el-icon>
                            </div>
                        </template>
                    </el-image>
                    <el-text class="goods-title" line-clamp="2">
                        {{ col.name }}
                    </el-text>
                    <el-text class="goods-price">
                        <span style="font-size: 16px;">￥</span>{{ (col.price).toFixed(1) }}
                    </el-text>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { utilMethods } from '../util/methods';

axios.defaults.baseURL = '/api';

export default {
    data() {
        return {
            goods: [
                // {
                //     "gid": 1,
                //     "tid": 1,
                //     "name": "草莓蛋糕",
                //     "cover": "img7.jpg",
                //     "image1": "\"\"",
                //     "image2": "\"\"",
                //     "price": 89.9,
                //     "intro": "商品描述",
                //     "stock": 80,
                //     "createTime": "2023-12-15T14:26:14",
                //     "updateTime": "2023-12-15T14:26:14",
                //     "status": 1
                // },
                // {
                //     "gid": 1,
                //     "tid": 1,
                //     "name": "草莓蛋糕",
                //     "cover": "img7.jpg",
                //     "image1": "\"\"",
                //     "image2": "\"\"",
                //     "price": 89.9,
                //     "intro": "商品描述",
                //     "stock": 80,
                //     "createTime": "2023-12-15T14:26:14",
                //     "updateTime": "2023-12-15T14:26:14",
                //     "status": 1
                // },
                // {
                //     "gid": 1,
                //     "tid": 1,
                //     "name": "草莓蛋糕",
                //     "cover": "img7.jpg",
                //     "image1": "\"\"",
                //     "image2": "\"\"",
                //     "price": 89.9,
                //     "intro": "商品描述",
                //     "stock": 80,
                //     "createTime": "2023-12-15T14:26:14",
                //     "updateTime": "2023-12-15T14:26:14",
                //     "status": 1
                // }, 
            ],
            rows: [],
            users: [],
            path: '',
        }
    },
    created() {
        this.getGoods();
        this.path = window.location.search;
    },
    updated() {
        if (window.location.search != this.path) {
            this.path = window.location.search;
            this.getGoods();
        }
    },
    methods: {
        //将商品数组做成n行4列的二维数组
        getRows() {
            let len = this.goods.length;
            let rows = Math.ceil(len / 4);
            let cols = 4;
            let arr = [];
            for (let i = 0; i < rows; i++) {
                let tempArray = [];
                for (let j = 0; j < cols; j++) {
                    if (i * cols + j < len) {
                        tempArray.push(this.goods[i * cols + j]);
                    } else {
                        break;
                    }
                }
                arr.push(tempArray);
            }
            this.rows = arr;
        },
        getGoods() {
            let path = '/goods'
            const params = new URLSearchParams(window.location.search);
            params.forEach((value, key) => {
                if (key === 'type') {
                    path += "/" + value;
                }
            });
            axios.get(path)
                .then(result => {
                    if (result.data.code === 1) {
                        this.goods = result.data.data;
                        this.getRows();
                    } else {
                        ElMessage.info("获取商品列表失败！！！");
                    }
                })
                .catch(err => {
                    console.log(err);
                    if (err.response.status === 500) {
                        ElMessage.error("无法连接后端服务器");
                        return;
                    }
                    ElMessage.info("连接异常：" + err.message);
                })
        },
        detail(goods) {
            utilMethods.detail(goods);
        }
    }
}
</script>



<style>
.goods-row {
    min-width: 1200px;
}

.goods-col {
    min-width: 300px;
    min-height: 350px;
    width: 300px;
    height: 380px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.goods-box {
    border: 1px lightgray solid;
    border-radius: 4px;
    background-color: white;
    height: 380px;
    width: 280px;

}

.image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: lightgray;
    color: var(--el-text-color-secondary);
    font-size: 30px;
}

.goods-title {
    word-wrap: break-word;
    width: 240px;
    height: 36px;
    margin-top: 5px;
    margin-left: 20px;
    margin-right: 20px;
    color: #000;
    font: 700 28px 微软雅黑;
    display: inline-block;
}

.goods-price {
    height: 20px;
    margin-top: 10px;
    margin-left: 15px;
    color: orangered;
    font: 700 20px 微软雅黑;
    display: inline-block;
}
</style>